<template>
  <div style="background-color: #000;">
    <section>
      <div class="container">
        <!-- 面包屑导航star -->
        <el-breadcrumb separator="/" class="breadCrumb_Box">
          <el-breadcrumb-item :to="{ path: '/packageAPP' }" class="item-a">打包APP</el-breadcrumb-item>
          <el-breadcrumb-item>新建应用</el-breadcrumb-item>
          <el-breadcrumb-item><strong>{{ c_breadCrumb_name }}</strong></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面包屑导航end -->
        <el-row class="content">
          <el-col class="nav" :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
            <editAppMenu ref="appMenu" @handleClick="handleClick" :createdpage="createdpage" v-if="appMenuShow">
            </editAppMenu>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
            <div>
              <router-view></router-view>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>
  </div>
</template>

<script>
  import editAppMenu from "@/components/packApp/editApp/editAppMenu";
  import editMyApp from "@/components/packApp/editApp/editMyApp";
  import createMyApp from "@/components/packApp/editApp/createMyApp";

  export default {
    components: {
      createMyApp,
      editMyApp,
      editAppMenu
    },
    data() {
      return {
        userSrc: "../../../static/realName/userico.png", //我的资料图标
        orderSrc: "../../../static/realName/orderico.png", //我的订单图标
        // 默认显示first页面
        c_breadCrumb_name: "新建应用",
        // 记录当前tab页
        active: 0,
        appid: "",
        routeing: "",
        createdpage: 0,
        appMenuShow: true
      };
    },

    mounted() {
      let that = this
      that.$root.$on("reLoaldting", function () {
        that.reload()
      })
    },
    watch: {},
    beforeRouteLeave(to, from, next) {
      // 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
      // 根据个人需求决定清除的时间
      sessionStorage.removeItem("editAPP");
      next();
    },
    methods: {
      // 选择侧边导航栏
      handleClick(index) {
        this.active = index;
        if (this.active == 0) {
          this.c_breadCrumb_name = "编辑应用";
          this.createdpage = 0;
        }
        if (this.active == 1) {
          this.c_breadCrumb_name = "生成安装包";
        }
      },
      reload() {
        this.appMenuShow = false
        this.$nextTick(() => {
          this.appMenuShow = true;
          console.log('页面已刷新');
        })
      }
    },
    created() {
      // console.log(this.$route.name);
      this.appid = this.$route.query.AppID;
      if (this.appid) {
        localStorage.setItem("appid", this.appid);
      }
      // console.log(localStorage.getItem("appid"));
      // console.log(this.$route.name);

    }
  };

</script>
<style scoped>
  .breadCrumb_Box {
    margin-top: 30px;
  }

  .content {
    width: 100%;
    height: 100%;
    margin: 20px 0px 30px 0px;
    background-color: #0f0f0f;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
  }

  div>>>.nav {
    max-width: 180px;
    display: inline-block;
    background-color: #fff;
  }

  @media screen and (max-width: 992px) {
    div>>>.nav {
      max-width: 100%;
      display: inline-block;
      background-color: #fff;
    }
  }

  .breadCrumb_Box>>>.el-breadcrumb__item.item-a .el-breadcrumb__inner {
    color: #ee7829;
  }

  .breadCrumb_Box>>>.el-breadcrumb__item .el-breadcrumb__separator {
    color: #fff;
  }

  .breadCrumb_Box>>>.el-breadcrumb__item .el-breadcrumb__inner {
    color: #fff;
  }

  .content>>>.el-menu-vertical-demo.container-table101.el-menu {
    background-color: rgba(30, 30, 30, 0.8);
    border-right: 1px solid #272727;
  }

  .content>>>.el-menu-vertical-demo.container-table101.el-menu .el-menu-item i.iconfont {
    color: #fff;
  }

  .content>>>.el-menu-vertical-demo.container-table101.el-menu .el-menu-item:hover {
    background-color: #ccc;
  }

  .content>>>.el-menu-vertical-demo.container-table101.el-menu .el-menu-item span {
    color: #fff;
  }

</style>
